/* 
  需求5：✅新增一条数据
  1. Header组件改造为受控组件
  2. 监听回车事件
  3. 在App组件中定义新增的函数，传递给子组件
  4. 子传父：回调函数
  5. 在Header组件的回车事件中，触发调函数
  6. 完成新增的计算
  7. 优化： 非空判断 和 清空输入框的值
*/
import React, { useState } from 'react';

export default function Header({ handleAdd }) {
  const [name, setName] = useState('');
  // console.log('name----->', name);
  const handleKeyDown = (e) => {
    // 监听回车事件
    if (e.key === 'Enter') {
      // 非空判断
      if (name.trim()) {
        handleAdd(name);
        // 清空输入框
        setName('');
      } else {
        alert('内容不能为空');
      }
    }
  };
  return (
    <header className="header">
      <h1>todos</h1>
      <input
        className="new-todo"
        placeholder="需要做什么"
        autoFocus
        // Header组件改造为受控组件
        value={name}
        onChange={(e) => {
          setName(e.target.value);
        }}
        // 监听回车事件
        onKeyDown={handleKeyDown}
      />
    </header>
  );
}
